<template>
  <el-form :model="form" label-position="top">
    <el-form-item label="标题" prop="title">
      <el-input
        v-model="form.title"
        @input="onConfigChange"
        maxlength="20"
        show-word-limit
      ></el-input>
    </el-form-item>
    <el-form-item label="提示文字" prop="tips">
      <el-input
        type="textarea"
        :rows="4"
        v-model="form.tips"
        maxlength="50"
        show-word-limit
        @input="onConfigChange"
      ></el-input>
    </el-form-item>
    <el-form-item label="表单ID" prop="key">
      <el-input v-model="form.key" @input="onConfigChange"></el-input>
    </el-form-item>
    <el-form-item label="表格数据" prop="table">
      <InnerTableColumn
        v-model="form.columns"
        @open="dialogVisible = true"
        @change="onConfigChange" />
    </el-form-item>
    <el-form-item label="多行表单" prop="addRow">
      <el-switch
        v-model="form.addRow"
        active-text="是"
        inactive-text="否"
        @change="onConfigChange"
      />
    </el-form-item>
    <el-form-item label="是否显示合计栏" prop="total">
      <el-switch
        v-model="form.total"
        active-text="是"
        inactive-text="否"
        @change="onConfigChange"
      />
      <p class="form-designer-tips"><i class="icon iconfont">&#xe77e;</i>只合计数值栏</p>
    </el-form-item>
    <el-form-item label="默认行" prop="defaultRow">
      <el-input v-model="form.defaultRow" @input="onConfigChange"></el-input>
    </el-form-item>
    <el-form-item label="最大行数" prop="maxRow">
      <el-input v-model="form.maxRow" @input="onConfigChange"></el-input>
    </el-form-item>
    <!-- 更多配置 -->
    <el-dialog v-model="dialogVisible" title="更多配置" :fullscreen="true" :append-to-body="true">
      <el-divider content-position="left">表格预览</el-divider>
      <InnerTable :id="id" :tdId="tdId" :formType="formType" :config="config" type="config-table"/>
      <el-divider content-position="left">表格列配置</el-divider>
      <div style="display: flex;margin: 0 0 5px 21px;">
        <div style="width: 200px;margin-right: 5px;">字段类型</div>
        <div style="width: 200px;margin-right: 5px;">字段名</div>
        <div style="width: 200px;margin-right: 5px;">字段key</div>
        <div style="width: 200px;margin-right: 5px;">数值校验函数</div>
        <div style="width: 130px;margin-right: 30px;">是否必填</div>
        <div style="width: 200px;">删除列</div>
      </div>
      <InnerTableColumn v-model="form.columns" @change="onConfigChange" :moreConfig="true" />
      <p class="form-designer-tips">
        <i class="icon iconfont">&#xe77e;</i>数值校验函数：all-列数据合计、val-此项数据
      </p>
      <el-divider content-position="left">组件输出数据设计</el-divider>
      <el-input v-model="form.exportVal" @input="onConfigChange"></el-input>
      <p class="form-designer-tips">
        <i class="icon iconfont">&#xe77e;</i>只可搭配【数值】列的key值，代表为所属列的合计值
      </p>
    </el-dialog>
  </el-form>
</template>

<script setup lang="ts">
const { updateFormItem } = inject<{ updateFormItem: (id: string, config: any) => void }>('forms', {
  updateFormItem: () => {}
})
const props = defineProps<{
  id: string
  tdId: string
  formType: string
  config: any
}>()
let form = reactive({
  title: '',
  tips: '', // 提示语
  required: false, // 是否必填
  key: '', // 表单项key值

  columns: [],
  addRow: false,
  total: '',
  defaultRow: 3,
  maxRow: 50,
  exportVal: ''
})
const dialogVisible = ref<boolean>(false)
onMounted(() => {
  form = Object.assign(form, props.config)
})
watch(props, () => {
  form = Object.assign(form, props.config)
})
const onConfigChange = () => {
  form.required = form.columns.some((el: any) => {
    return el.required
  })
  updateFormItem(props.id, form)
}
</script>
